﻿@model Tuple<XT.Model.Room, IEnumerable<XT.Model.Amentity>,XT.Model.Account>

@{
    ViewBag.Title = "Room";
    Layout = "~/Views/Global/Layout.cshtml";
  
}
<script src="/Scripts/Room/Index.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div class="housemapmargin">
    <div id="map-canvas" class="housemap"></div>
    <a href=' @Url.Action("Index", "Host", new { id = @Model.Item1.Room_List.Account.Id })' class="houseavamargin">
        <img class="houseavaimg" src="/Images/ava.jpg" />
    </a>
</div>
<div class="maininfo" style="width: 100%; overflow: hidden;">
    <div class="hero2" style="padding-top: 0px; height: 300px;">
        
        <img class="houseimage" src="@Model.Item1.Room_Image" style="width: 100%; height: 300px;" />
        <div class="room-container"  id="room-@Model.Item1.Id">
            <div class="housedetail">

                <h2>@Model.Item1.Room_Name</h2>
                <ul>
                    <li>Giá phòng: $@Model.Item1.Room_Price</li>
                    <li>Loại phòng: @Model.Item1.Room_Type.Room_Type_Name</li>
                    <li>Số điện thoại: @Model.Item1.Room_List.Account.Account_Phone</li>
                    <li>Địa chỉ: @Model.Item1.Room_Address</li>
                </ul>
            </div>
        </div>
        <button id="btnView360" class="btn btn-primary btn-lg" type="button" style="position: absolute;right: 20px;bottom: 20px;">Xem 360</button>
    </div>
    <div class="hero3" style="float: left; height: 300px;">
        @*<img class="houseimage" src="@Model.Item1.Room_Image" style="width: 100%; height: 300px;" />*@
        <div id="pano-canvas" style="width: 100%; height: 300px;"></div>
        <button id="btnBack360" class="btn btn-primary btn-lg" type="button" style="position: absolute;right: 20px;bottom: 20px;z-index: 2;">Quay lại</button>
    </div>
</div>
@*<div class="pricetag">
    <p>$@Model.Item1.Room_Price</p>
    <input style="display:none" id="roomid" value="@Model.Item1.Id" type="number"/>
</div>*@
<div style="background-color: rgb(250, 250, 250); padding-top: 20px">
    <div class="container ">
        <div class="row">
            <div class="col-md-8">
                <div class="housedescription">
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active"><a href="#description" data-toggle="tab">Mô tả</a></li>
                        <li><a href="#amentities" data-toggle="tab">Tiện ích</a></li>

                    </ul>
                    <div id="myTabContent" class="tab-content" style="margin-top: 10px">
                        <div id="description" class="tab-pane  active ">
                            <p>
                                @Model.Item1.Room_Description
                            </p>
                        </div>
                        <div id="amentities" class="tab-pane ">
                            <div class="row">
                                @foreach (XT.Model.Amentity amentity in Model.Item2)
                                { 
                                    <div class="col-xs-6 col-sm-3" id="item-@amentity.Id">
                                        <span class="glyphicon glyphicon-ok" style="visibility: hidden"></span>
                                        <span class="item" style="color: #ddd">&nbsp;@amentity.Amentity_Name</span>
                                    </div>
                                }
                            </div>
                        </div>
                    </div>
                </div>
                <div class="housereviews">
                    <ul id="mytab1" class="nav nav-tabs">
                        <li class="active"><a href="#reviews" data-toggle="tab">Reviews</a></li>


                    </ul>
                    <div class="tab-content" style="margin-top: 10px">
                        <div id="reviews" class="tab-pane  active ">
                            @{if (Request.Cookies["Id"] != null)
                              {                                  
                                <div class="media">
                                    <a class="pull-left" href="#">
                                      
                                        <img class="media-object" src="/Images/@Model.Item3.Account_Avatar" width="70" height="70" alt="..." />
                                    </a>
                                    <div class="media-body reviewdetail">
                                        <form method="post" id="formReview" enctype="multipart/form-data">
                                            <input name="cmtId" style="display:none" value="@Model.Item1.Id" />
                                            <input name="cmtAcc" style="display:none" value="@Model.Item3.Id" id="cmtAcc"/>
                                            <input type="text" class="form-control" placeholder="Nhập tiêu đề" name="cmtTitle" id="cmtTitle" />
                                            <textarea class="form-control" rows="3" placeholder="Nhập nội dung bình luận" name="cmtContent" id="cmtContent"></textarea>
                                        </form>
                                        <div class="reviewpost">
                                            <button type="button" class="btn btn-primary" id="btnComment">Bình luận</button>
                                        </div>
                                    </div>
                                </div>
                              }
                            }
                            @Html.Action("GetRoomReviews", "Room", new { idRoom = Model.Item1.Id });
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <script type="text/javascript">
                    $(document).ready(function () {

                    });
                </script>
                <div class="panel panel-default" style="margin-left: 20px">
                    <div class="panel-heading textcenter ">Ảnh phòng</div>
                    <div class="panel-body" style="list-style: none; text-align: left; margin-left: 15px">
                        <div class="row" style="margin-bottom: 5px">
                            <img src="/Images/image1.png" width="150" height="80" class="imgsmall" />
                            <img src="/Images/image2.png" width="150" height="80" class="imgsmall" />
                        </div>

                        <div class="row">
                            <img src="/Images/image3.png" width="150" height="80" class="imgsmall" />
                            <img src="/Images/image4.png" width="150" height="80" class="imgsmall" />
                        </div>
                    </div>
                    <div class="showallphoto">
                        <a style="text-decoration: none; cursor: pointer" href="@Url.Action("Photos", "Room", new { id = @Model.Item1.Id })">
                            <h3 class="panel-title textcenter1">Xem tất cả</h3>
                        </a>
                    </div>
                </div>
                <div class="panel panel-default" style="margin-left: 20px">
                    <div class="panel-heading textcenter ">Phòng tương tự</div>
                    <ul class="panel-body panel-body-croll">
                        <li class="media mgtf">
                            <a class="pull-left" href="#">
                                <img class="media-object" width="120" height="80" src="/Images/image2.png" alt="..." />
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">White House</h4>
                                <p>0.6mi away </p>
                                <p>$400</p>
                            </div>
                        </li>
                        <li class="media mgtf">
                            <a class="pull-left" href="#">
                                <img class="media-object" width="120" height="80" src="/Images/image1.png" alt="..." />
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">White House</h4>
                                <p>0.6mi away </p>
                                <p>$400</p>
                            </div>
                        </li>
                        <li class="media mgtf ">
                            <a class="pull-left" href="#">
                                <img class="media-object" width="120" height="80" src="/Images/image5.jpg" alt="..." />
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">White House</h4>
                                <p>0.6mi away </p>
                                <p>$400</p>
                            </div>
                        </li>
                        <li class="media mgtf">
                            <a class="pull-left" href="#">
                                <img class="media-object" width="120" height="80" src="/Images/image2.png" alt="..." />
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">White House</h4>
                                <p>0.6mi away </p>
                                <p>$400</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="panel panel-default" style="margin-left: 20px">
                    <div class="panel-heading textcenter">Nearly Utilities</div>
                    <ul class="panel-body panel-body-croll" id="utilities-container">
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="modalDiv">
        <a id="imgnext" class="imgpre" href="javascript:;"></a>
        <a id="imgpre" class="imgnext" href="javascript:;"></a>
        <a id="thoat" class="thoat" href="javascript:;">x</a>
        <div class="image">
            <img alt="" src="" />
        </div>

    </div>
    <div id="modalBackground"></div>
</div>
